<template>
    <div class="app-container">
        <el-col :span="18" :offset="3" :xs="24">
           <el-card class="Empl_leave_edit" v-if="editFlag">
              <div slot="header" class="clearfix">
                  <span>离职申请</span>
              </div>
              <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                    <el-row>
                            <el-col :span="12" >
                                <el-form-item label="申请日期" prop="applyDate">
                                    <el-date-picker clearable
                                       v-model="form.applyDate"
                                       type="datetime"
                                       value-format="yyyy-MM-dd HH:mm:ss"
                                       default-time = "00:00:00"
                                       placeholder="请选择申请日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" >
                                <el-form-item label="申请人" prop="applyPartyId">
                                    <el-select v-model="form.applyPartyId" placeholder="请选择申请人">
                                        <el-option
                                           v-for="dict in applyPartyIdOptions"
                                           :key="dict.partyId"
                                           :label="dict.firstName"
                                           :value="dict.partyId"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                    </el-row >
                    <el-row>
                            <el-col :span="12" >
                                <el-form-item label="离职员工" prop="partyId">
                                     <LoadPersonSelect
                                        :placeholder="'请选择离职员工'"
                                        @getSelectedCourt="getSelectedPartyID"
                                    ></LoadPersonSelect>
                                </el-form-item>
                            </el-col>
                   
                            <el-col :span="12" >
                                <el-form-item label="离职类型" prop="leaveType">
                                    <el-select v-model="form.leaveType" placeholder="请选择离职类型">
                                        <el-option
                                           v-for="dict in leaveTypeOptions"
                                           :key="dict.enumCode"
                                           :label="dict.description"
                                           :value="dict.enumCode"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                     </el-row >
                    <el-row>                        
                            <el-col :span="12" >
                                <el-form-item label="离职日期" prop="leaveDate">
                                    <el-date-picker clearable
                                       v-model="form.leaveDate"
                                       type="date"
                                       value-format="yyyy-MM-dd"
                                       placeholder="请选择离职日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12" >
                                <el-form-item label="期望离职日期" prop="hopeLeaveDate">
                                    <el-date-picker clearable
                                       v-model="form.hopeLeaveDate"
                                       type="date"
                                       value-format="yyyy-MM-dd"
                                       placeholder="请选择期望离职日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                    </el-row >
                    <el-row v-if="approveFlag">                            
                            <el-col :span="12" >
                                <el-form-item label="停薪日期" prop="stopSalaryDate">
                                    <el-date-picker clearable
                                       v-model="form.stopSalaryDate"
                                       type="date"
                                       value-format="yyyy-MM-dd"
                                       placeholder="请选择停薪日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                    </el-row >
                    <el-row>
                            <el-col :span="20" >
                                <el-form-item label="离职原因" prop="reason">
                                    <el-input v-model="form.reason" type="textarea" placeholder="请输入内容" />
                                </el-form-item>
                            </el-col>
                    </el-row >
                    <el-row>                    
                        <el-col :span="20" >
                            <el-form-item label="附件">
                                <file-upload v-model="form.proofFileid"/>
                            </el-form-item>
                        </el-col>
                    </el-row >
                    <!-- <el-row >
                            <el-col :span="12" >
                                <el-form-item label="离职状态" prop="statusId">
                                    <el-select v-model="form.statusId" placeholder="请选择离职状态">
                                        <el-option
                                           v-for="dict in statusIdOptions"
                                           :key="dict.enumCode"
                                           :label="dict.description"
                                           :value="dict.enumCode"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                     </el-row > -->
                    <el-row>                           
                        <el-col :span="12" >
                            <el-form-item label="审批人" prop="approver">
                                     <LoadPersonSelect
                                        :placeholder="'请选择申请人'"
                                        @getSelectedCourt="getSelectedApprover"
                                    ></LoadPersonSelect>
                            </el-form-item>
                        </el-col>
                    </el-row >
                    <el-row>
                        <el-col :span="24">
                            <el-form-item size="large" align="center">
                                <el-button type="primary" @click="saveForm">保 存</el-button>
                                <el-button type="primary" @click="submitForm">提 交</el-button>
                                <el-button type="danger"  @click="close">关闭</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>

            <el-card class="Empl_leave_detail" v-if="detailFlag">
                <div slot="header" class="clearfix">
                    <span>离职申请</span>
                    <!-- <el-button v-if="applyFlag" style="float: right; padding: 3px 0" type="text" @click="edit">编辑</el-button> -->
                    <el-button style="float: right; padding: 3px 0" type="text" @click="edit">编辑</el-button>
                </div>
                <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                    <el-row>
                        <el-col :span="12" >
                            <el-form-item label="申请日期" prop="applyDate">
                                <span>{{ form.applyDate }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" >
                            <el-form-item label="申请人" prop="applyPartyId">
                                <span>{{ applyPartyIdFormat(form) }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row >
                    <el-row>
                        <el-col :span="12" >
                            <el-form-item label="离职员工" prop="partyId">
                                <span>{{ partyIdFormat(form) }}</span>
                            </el-form-item>
                        </el-col>                      
                        <el-col :span="12" >
                            <el-form-item label="离职类型" prop="leaveType">
                                <span>{{ leaveTypeFormat(form) }}</span>
                            </el-form-item>
                        </el-col>
                     </el-row >
                    <el-row>                       
                        <el-col :span="12" >
                            <el-form-item label="离职日期" prop="leaveDate">
                                <span>{{ form.leaveDate }}</span>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12" >
                            <el-form-item label="期望离职日期" prop="hopeLeaveDate">
                                <span>{{ form.hopeLeaveDate }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row >
                    <el-row>                        
                        <el-col :span="12" >
                            <el-form-item label="停薪日期" prop="stopSalaryDate">
                                <span>{{ form.stopSalaryDate }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row >
                    <el-row >
                        <el-col :span="20" >
                            <el-form-item label="离职原因" prop="reason">
                                <span>{{ form.reason }}</span>
                            </el-form-item>
                        </el-col>
                     </el-row >
                    <el-row>                       
                        <el-col :span="20" >
                            <el-form-item label="附件" prop="proofFileid">
                                <span>{{ form.proofFileid }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row >
                    <el-row>
                        <el-col :span="12" >
                            <el-form-item label="离职状态" prop="statusId">
                                <span>{{ statusIdFormat(form) }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" >
                            <el-form-item label="审批人" prop="approver">
                                <span>{{ approverFormat(form) }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row >
                    <el-row>
                        <el-col :span="24" v-if="applyFlag">
                            <el-form-item size="large" align="center">
                                <el-button type="primary" @click="saveForm">保 存</el-button>
                                <el-button type="primary" @click="submitForm">提 交</el-button>
                                <el-button type="danger"  @click="close">关闭</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>
            <!-- 审批组件 -->
            <approve v-if="approveFlag"></approve>
        </el-col>
    </div>
</template>

<script>
import LoadPersonSelect from "@/components/LoadPersonSelect";
import { addEmpl_leave, updateEmpl_leave, approvalEmpl_leave } from "@/api/ehr/empl_leave";
import { getBusinessLog } from "@/api/busi/log";
import { getProcessVariables } from "@/api/workflow/definition";
// 审批组件
import Approve from "@/components/Approve";

export default {
    components: {LoadPersonSelect,Approve},
    name: "Empl_leave_apply",
    data() {
        return {
            // 遮罩层
            loading: true,
            // 申请人业务字典
            applyPartyIdOptions: [],
            // 员工业务字典
            partyIdOptions: [],
            // 离职类型业务字典
            leaveTypeOptions: [],
            // 是否开具离职证明业务字典
            leaveProofStatusOptions: [],
            // 交接状态业务字典
            joinStatusOptions: [],
            // 离职状态业务字典
            statusIdOptions: [],
            // 流程状态业务字典
            flowStatusOptions: [],
            // 操作标识,用于区分是新增还是修改
            updateFlag: false,
            // 操作标识,用于区分是详情
            detailFlag: false,
            // 操作标识,用于区分编辑状态
            editFlag: true,
            // 业务申请标识
            applyFlag: true,
            // 业务审批标识
            approveFlag: false,

            // 表单参数
            form: {},
            // 表单校验
            rules: {
                partyId: [
                    { required: true, message: "员工不能为空", trigger: "change" }
                ],

                leaveDate: [
                    { required: true, message: "离职日期不能为空", trigger: "blur" }
                ],
                approver: [
                    { required: true, message: "审批人不能为空", trigger: "blur" }
                ],
            }
        };
    },
    created() {
        this.reset();
        // 为申请时间默认赋值
        this.form.applyDate = this.parseTime(
            new Date(),
            "{y}-{m}-{d} {h}:{i}:{s}"
        );
        // 为申请人默认值
        this.form.applyPartyId = this.$store.state.user.partyId;
         // 申请人业务字典
        this.getEntityDicts("person:partyId:firstName").then((response) => {
             this.applyPartyIdOptions = response.data;
        });
         // 员工业务字典
        this.getEntityDicts("person:partyId:firstName").then((response) => {
             this.partyIdOptions = response.data;
        });
         // 离职类型业务字典
        this.getEnumDicts("EMPL_LEAVE_TYPE").then((response) => {
            this.leaveTypeOptions = response.data;
        });
         // 离职状态业务字典
        this.getEnumDicts("FLOW_STATUS").then((response) => {
            this.statusIdOptions = response.data;
        });
        var procInsId = this.$route.query && this.$route.query.procInsId;
        if (procInsId) {
            this.editFlag = false;
            this.detailFlag = true;
            // 业务申请标识
            this.applyFlag = false;
            // 审批标识
            this.approveFlag = true;
        };
        var taskId = this.$route.query && this.$route.query.taskId;
        // 获取表单参数
        this.getApproveFormParams(taskId, procInsId);
    },
    computed: {
        userInfo() {
            return this.$store.state.user; //当前登录用户信息
        },
    },
    methods: {
        // 获取审批表单变量
        getApproveFormParams(taskId, procInsId) {
            // 1.优先从工作流的参数中获取表单信息,流程任务重获取变量表单
            if (taskId) {
                getProcessVariables(taskId).then((res) => {
                    this.form = res.data.businessMap;
            });
            } else {
                // 2.从业务流水表获取工作流表单参数
                getBusinessLog(procInsId).then((response) => {
                    if(response.data){
                        this.form = JSON.parse(response.data.busiContentJson);
                    }                    
                });
            }
        },

        // 离职人选择赋值
        getSelectedPartyID(e) {
            this.form.partyId = e;
        },
        // 审批人选择赋值
        getSelectedApprover(e) {
            this.form.approver = e;
        },
        applyPartyIdFormat(row, column) {
            let val = null;
            this.applyPartyIdOptions.forEach((item, index) => {
                if (row.applyPartyId === item.partyId) {
                    val = item.firstName;
                }
            });
            return val;
        },
        partyIdFormat(row, column) {
            let val = null;
            this.partyIdOptions.forEach((item, index) => {
                if (row.partyId === item.partyId) {
                    val = item.firstName;
                }
            });
            return val;
        },
        leaveTypeFormat(row, column) {
            let val = null;
            this.leaveTypeOptions.forEach((item, index) => {
                if (row.leaveType === item.enumCode) {
                    val = item.description;
                }
            });
            return val;
        },
        statusIdFormat(row, column) {
            let val = null;
            this.statusIdOptions.forEach((item, index) => {
                if (row.statusId === item.enumCode) {
                    val = item.description;
                }
            });
            return val;
        },

        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                applyPartyId: null,
                applyDate: null,
                partyId: null,
                leaveType: null,
                leaveDate: null,
                hopeLeaveDate: null,
                stopSalaryDate: null,
                reason: null,
                proposal: null,
                proofFileid: null,
                leaveProofStatus: "0",
                emphasis: null,
                joinPartyId: null,
                joinStatus: "0",
                statusId: null,
                flowInstId: null,
                flowStatus: "0",
                approver: null,
                lastUpdatedStamp: null,
                lastUpdatedTxStamp: null,
                createdStamp: null,
                createdTxStamp: null
            };
            //this.resetForm("form");
        },

        /** 保存按钮 */
        saveForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.loading = true;
                    if (this.form.partyId != null && this.updateFlag) {
                        updateEmpl_leave(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                        });
                    } else {
                        addEmpl_leave(this.form).then(response => {
                            this.form.partyId = response.data.partyId;
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                        });
                    }
                    this.loading = false;

                    this.editFlag = false;
                    this.detailFlag = true;
                }
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.loading = true;

                    approvalEmpl_leave(this.form).then((response) => {
                        this.$modal.msgSuccess("申请提交成功！");
                        this.open = false;
                    });
                    this.loading = false;

                    this.close();
                }
            });
        },

        /** 编辑 */
        edit(){
            this.editFlag = true;
            this.detailFlag = false;
        },
        resetForm() {
            this.$refs['form'].resetFields()
        },
        close() {
            this.$tab.closePage();
        },

    }
};
</script>
